import React, { Component } from 'react'


export default class Demo extends Component {
  state = {username: 'tom'}
  changeName = () => {
    this.setState({
      username: 'json'
    })
  }


  render() {
    const {username} = this.state
    console.log('Parent---render')
    return (
      <div>
         <h2>Demo...</h2>
         <h4>我的用户名是{username}</h4>
         <button onClick={this.changeName}>点我换名字</button>
         <B render={(name) => <C name={name}/>}>
           {/* <C/> */}
         </B>
      </div>
    )
  }
}

class B extends Component {
  state = {name: 'tom'}
  render() {
    console.log('B---render')
    const {name} = this.state
    return (
      <div>
        B...
        <h4>{this.props.render(name)}</h4>
      </div>
    )
  }
}

class C extends Component {
  render() {
    console.log('C---render')
    return (
      <div>
        C...
        <h2>{this.props.name}</h2>
      </div>
    )
  }
}


